<template>
    <div>
        <Card :bordered="false" dis-hover class="ivu-mt pt10">
          <Button icon="ios-add" @click="add()">{{ $t('page.order.add') }} {{ $t('page.supplier.brand') }}</Button>

          <Table :columns="columns1" :data="list" class="mt25" no-userFrom-text="NO Data"
                 :no-filtered-userFrom-text="$t('page.order.no_data')"  :loading="loading" highlight-row>
            <template slot-scope="{ row, index }" slot="action">
              <a @click="edit(row)">{{ $t('page.order.edit') }}</a>
              <Divider type="vertical" />
              <a @click="del(row.id)">{{ $t('page.order.delete') }}</a>

            </template>
          </Table>
        </Card>
      <Modal
          v-model="is_show"
          scrollable
          :title="gettitle"
          :closable="true"
          width="60%"
          @on-cancel="onCancel"
          :footer-hide="true"
          :mask-closable="false"
      >
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
          <FormItem :label="$t('page.supplier.brand')+$t('page.order.name')+':'" prop="supplier_name">
            <el-input
                type="text"
                :placeholder="$t('page.supplier.brand')+$t('page.order.name')"
                v-model="formValidate.brand_name"
                maxlength="20"
                show-word-limit
            >
            </el-input>
          </FormItem>
        </Form>
        <Button type="primary" @click="handleSubmit('formValidate')">{{$t('page.order.submit')}}</Button>
      </Modal>
    </div>
</template>

<script>

import {brandList, createStoreBrandApi} from "@api/brand";
    export default {
        name: 'index',
        components: {},
        data() {
            return {
                formValidate: {
                  brand_name: "",
                  id:0,
                },
                iframe_url:"",
                is_show:false,
                loading:false,
                list:[],
                urlList: ["http://supplier.vanitii-global.com/uploads/file/EuzC2LtnvAcmRDI7PbfkdiyKOU1wFV8h.png",'http://supplier.vanitii-global.com/uploads/file/CYVXEgIyKMiHwTbuDOzkLj1chG56eBpN.png'],
                addresData: [],
                ruleValidate: {
                  brand_name: [
                        { required: true, message: '请输入品牌名称', trigger: 'blur' }
                    ],
                }
            }
        },
        created() {
            this.getList();
        },
        mounted() {

        },
        computed: {
          gettitle(){
            if (this.formValidate.id == 0){
              return $t('page.order.add')+ $t('page.supplier.brand')
            }else {
              return $t('page.order.edit') + $t('page.supplier.brand')
            }
          },
          columns1(){
            return [
              {
                title: $t('page.supplier.brand'),
                key: 'brand_name',
                minWidth: 150
              },
              {
                title: $t('page.supplier.is')+$t('page.supplier.view'),
                key: 'is_show',
                minWidth: 250
              },
              {
                title: $t('page.order.operate'),
                slot: 'action',
                fixed: 'right',
                minWidth: 120
              }
            ]
          }
        },
        methods: {
          onCancel(){
            this.formValidate = {brand_name:"",id:0}
          },
            del(id){
              this.delfromData = {
                title:$t('page.order.delete')+ $t('page.supplier.brand'),
                info: "您确认删除此品牌吗?",
                url: `product/brand/del/${id}`,
                method: "delete",
                ids: "",
              };
              this.$modalSure(this.delfromData)
                  .then((res) => {
                    this.$Message.success(res.msg);
                    this.getList();
                  })
                  .catch((res) => {
                    this.$Message.error(res.msg);
                  });
            },
            add(){
              this.is_show = true
            },
            edit(row){
              this.formValidate = row
              this.is_show = true
            },
            getList(){
              this.loading = true
              brandList().then(res=>{
                this.list = res.data.list;
                this.loading = false
              }).catch(err=>{
                this.$Message.error(err.msg);
              })
            },
          saveBrand(){
            createStoreBrandApi(this.formValidate).then(async (res) => {
              this.is_show = false;
              this.$Message.success(res.msg);
              this.onCancel()
              this.getList()
            }).catch((res) => {
              this.is_show = false;
              this.$Message.error(res.msg);
            });
          },
            // 提交
            handleSubmit(name) {
              this.$refs[name].validate((valid) => {
                if (valid) {
                  this.saveBrand();
                }
              });
            },
        }
    }
</script>

<style lang="less" scoped>
    .input{
        max-width: 460px;
    }
    .fixed-card {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 200px;
        z-index: 10;
        box-shadow: 0 -1px 2px rgb(240, 240, 240);

        /deep/ .ivu-card-body {
            padding: 15px 16px 14px;
        }

        .ivu-form-item {
            margin-bottom: 0;
        }

        /deep/ .ivu-form-item-content {
            margin-right: 124px;
            text-align: center;
        }

        .ivu-btn {
            height: 36px;
            padding: 0 20px;
        }
    }
</style>
